<template>
    <div class="app">
        <div class="Top">
            <!-- 运单信息 -->
            <div class="size">运单信息</div>
            <el-form :inline="true" :model="form" class="demo-form-inline">
                <el-form-item label="送货方式">
                    <el-select v-model="form.method" placeholder="请选择送货方式">
                        <el-option v-for="item in options" :key="item.method" :label="item.label" :value="item.method"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="预计到货时间">
                    <el-date-picker v-model="form.arrive" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"> </el-date-picker>
                </el-form-item>
                <el-form-item label="货主方联系人">
                    <el-input v-model="form.contacts"></el-input>
                </el-form-item>
                <el-form-item label="送货仓库">
                    <el-select v-model="form.wId" placeholder="请选择送货仓库">
                        <el-option v-for="item in option" :key="item.wId" :label="item.name" :value="item.wId"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="车船号码">
                    <el-input v-model="form.plate"></el-input>
                </el-form-item>
                <el-form-item label="客户">
                    <el-input placeholder="请输入内容" v-model="form.belongName" :disabled="true">
                        <el-button slot="append" @click="getData">选择</el-button>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" size="medium" v-if="state">新增运单</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 货品清单 -->
        <div class="sizebox">
            <div class="size">货品清单</div>
            <el-button type="primary" @click="Goodslist()" size="medium">添加商品</el-button>
        </div>
        <!-- 批次号 -->
        <el-form :inline="true" :model="getdate" class="demo-form-inline">
            <el-form-item label="批次号">
                <el-input v-model="getdate.batch" placeholder="请输入货品名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="Batchnumber" icon="el-icon-search">搜索</el-button>
                <el-button @click="Reset" icon="el-icon-refresh">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 数据 -->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="index" label="序号" width="120"> </el-table-column>
            <el-table-column prop="product.number" label="货品编号" width="100"> </el-table-column>
            <el-table-column prop="product.name" label="货品名称"> </el-table-column>
            <el-table-column prop="stock" label="订单数量"> </el-table-column>
            <el-table-column prop="product.unit" label="单位"> </el-table-column>
            <el-table-column prop="product.spec" label="规格"> </el-table-column>
            <el-table-column prop="product.code" label="规格"> </el-table-column>
            <el-table-column prop="product.brand" label="品牌"> </el-table-column>
            <el-table-column prop="product.Batch" label="批次号"> </el-table-column>
            <el-table-column prop="product.validity" label="保质期"> </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">修改数量</el-button>
                    <el-button type="text" size="small" @click="modificationdate(scope.row)">修改日期</el-button>
                    <el-button type="text" size="small" @click="del(scope.row.infoId)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                v-show="hide"
                style="float: right"
                background
                @size-change="handleSizeCha"
                @current-change="handleCurrentCha"
                :current-page="getdate.pageNum"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="getdate.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tatol"
            >
            </el-pagination>
        </div>
        <!-- 货品清单弹窗 -->
        <el-dialog title="商品选择" :visible.sync="dialogTableVisibl">
            <el-form :inline="true" :model="ProductPagination" class="demo-form-inline">
                <el-form-item label="货品名称">
                    <el-input v-model="ProductPagination.name" placeholder="请输入货品名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="Commodityselection" icon="el-icon-search">搜索</el-button>
                    <el-button @click="Reset" icon="el-icon-refresh">重置</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="griData" ref="multipleTable" tooltip-effect="dark" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column type="index" label="序号" width="50"> </el-table-column>
                <el-table-column property="name" label="货品名称" width="200"></el-table-column>
                <el-table-column property="sku" label="sku"></el-table-column>
                <el-table-column property="stock" label="库存数量" width="200"></el-table-column>
                <el-table-column property="stock" label="可用库存" width="200"></el-table-column>
                <el-table-column property="description" label="产品描述" width="200"></el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                    v-show="hid"
                    style="float: right"
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="ProductPagination.pageNum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="ProductPagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="tetol"
                >
                </el-pagination>
            </div>
            <div class="custome">
                <el-button type="primary" @click="choice">确认选择</el-button>
            </div>
        </el-dialog>
        <!-- 所属客户 -->
        <div class="">
            <el-dialog title="归属仓储客户选择" :visible.sync="dialogTableVisible">
                <el-table :data="gridData" style="width: 1080px">
                    <el-table-column property="name" label="名称" width="150"></el-table-column>
                    <el-table-column property="address" label="地址" width="200"></el-table-column>
                    <el-table-column property="contacts" label="联系人"></el-table-column>
                    <el-table-column property="callNumber" label="电话"></el-table-column>
                    <el-table-column property="fax" label="传真"></el-table-column>
                    <el-table-column property="phone" label="手机"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="handleEdit(scope.row.name, scope.row.cId)">选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 所属客户弹窗分页 -->
                <div class="block">
                    <el-pagination
                        style="float: right"
                        background
                        @size-change="handleSizeChang"
                        @current-change="handleCurrentChang"
                        :current-page="pagi.pageNum"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="pagi.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pagi.total"
                    >
                    </el-pagination>
                </div>
            </el-dialog>
        </div>
        <!-- 修改数量 -->
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <span v-if="state == 1">请输入数量</span>
            <el-form :model="modify">
                <el-form-item v-if="state == 1">
                    <el-input v-model="modify.stock" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="预计到货时间" v-else>
                    <el-date-picker v-model="modify.produceDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="Modifiedquantity">确 定</el-button>
                <el-button @click="dialogFormVisible = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { Warehousedata, Newwaybill, Itemaddition, Commodityconfirmation, Commodityconf, quantity, Deletedata, customer } from '@/api/user';
export default {
    name: 'baseform',
    data() {
        return {
            // 商品选择
            multipleTable: [],
            hide: false,
            griData: [],
            // 货品清单弹窗
            dialogTableVisibl: false,
            // 所属客户
            gridData: [],
            dialogTableVisible: false,
            form: {
                arrive: undefined,
                contacts: undefined,
                method: undefined,
                plate: undefined,
                wId: undefined,
                belongName: undefined,
                cId: undefined
            },
            // 送货方式
            options: [
                {
                    method: 0,
                    label: '汽车'
                },
                {
                    method: 1,
                    label: '船运'
                },
                {
                    method: 2,
                    label: '火车'
                },
                {
                    method: 3,
                    label: '自提'
                },
                {
                    method: 4,
                    label: '专车'
                },
                {
                    method: 5,
                    label: '零担'
                },
                {
                    method: 6,
                    label: '快递'
                }
            ],
            // 送货仓库
            option: [],
            // 所属客户分页
            pagi: {
                pageNum: 1,
                pageSize: 10,
                total: undefined
            },
            // 商品分页
            ProductPagination: {
                pageNum: 1,
                pageSize: 10,
                name: undefined
            },
            total: undefined,
            // 商品添加
            Productaddition: {
                oId: 0,
                category: 0,
                pId: 0,
                stock: undefined,
                pageNum: 1,
                pageSize: 10
            },
            // 数据传值
            getdate: {
                oId: undefined,
                pageNum: 1,
                pageSize: 10,
                category: 0,
                batch: undefined
            },
            // 数据
            tableData: [],
            // 修改
            title: undefined,
            // 修改状态
            state: 1,
            // 修改数量和日期
            modify: {
                infoId: undefined,
                stock: undefined,
                produceDate: undefined
            },
            // 修改数量弹窗
            dialogFormVisible: false,
            // 页面渲染总条目数
            tatol: undefined,
            state: true,
            tetol: undefined,
            hid: false
        };
    },
    methods: {
        // 多选
        handleSelectionChange(val) {
            this.multipleTable = val;
            for (let i = 0; i < this.multipleTable.length; i++) {
                this.Productaddition.category = this.multipleTable[i].category;
                this.Productaddition.stock = this.multipleTable[i].stock;
                this.getdate.category = this.multipleTable[i].category;
            }
        },
        // 商品选择和搜索
        Commodityselection() {
            Itemaddition(this.ProductPagination).then((ref) => {
                this.griData = ref.rows;
                this.tetol = ref.total;
                this.hid = true;
            });
        },
        // 货品添加弹窗
        Goodslist() {
            if (this.Productaddition.oId) {
                this.dialogTableVisibl = true;
                this.Commodityselection();
            } else {
                this.$message.error('请先新增运单');
            }
        },
        // 所属客户选择框
        handleEdit(name, cId) {
            this.dialogTableVisible = false;
            this.form.belongName = name;
            this.form.cId = cId;
        },
        // 新增运单
        onSubmit() {
            Newwaybill(this.form).then((ref) => {
                this.Productaddition.oId = ref.oId;
                this.getdate.oId = ref.oId;
                this.state = false;
            });
        },
        // 所属客户
        getData() {
            this.dialogTableVisible = true;
            customer(this.pagi).then((ref) => {
                (this.gridData = ref.rows), (this.pagi.total = ref.total);
            });
        },
        // 送货仓库
        Deliverywarehouse() {
            Warehousedata().then((ref) => {
                this.option = ref.rows;
            });
        },
        // 货品分页
        handleSizeChange(val) {
            this.ProductPagination.pageSize = Number(val);
            this.Commodityselection();
        },
        // 货品分页（页数）
        handleCurrentChange(val) {
            this.ProductPagination.pageNum = Number(val);
            this.Commodityselection();
        },
        // 所属客户分页
        handleSizeChang(val) {
            this.pagi.pageSize = Number(val);
            this.getData();
        },
        // 所属客户分页（页数）
        handleCurrentChang(val) {
            this.pagi.pageNum = Number(val);
            this.getData();
        },
        // 页面渲染分页
        handleSizeCha(val) {
            this.getdate.pageSize = Number(val);
            this.getdate();
        },
        // 页面渲染分页
        handleCurrentCha(val) {
            this.getdate.pageNum = Number(val);
            this.getdate();
        },
        // 重置
        Reset() {
            this.ProductPagination.name = undefined;
            this.Commodityselection();
        },
        // 确认选择
        async choice() {
            for (var i = 0; i < this.multipleTable.length; i++) {
                this.Productaddition.pId = this.multipleTable[i].pId;
                await Commodityconfirmation(this.Productaddition).then((ref) => {
                    console.log(ref);
                    this.Batchnumber();
                });
            }
            this.dialogTableVisibl = false;
        },
        // 批次号
        Batchnumber() {
            Commodityconf(this.getdate).then((ref) => {
                this.tableData = ref.rows;
                this.tatol = ref.total;
                this.hide = true;
            });
        },
        // 修改数量弹窗
        handleClick(val) {
            this.title = '修改数量';
            this.state = 1;
            this.modify.infoId = val.infoId;
            this.modify.stock = val.stock;
            this.dialogFormVisible = true;
        },
        // 修改数量
        Modifiedquantity() {
            if ((this.state = 1)) {
                quantity(this.modify).then((ref) => {
                    console.log(ref);
                    this.dialogFormVisible = false;
                    this.Batchnumber();
                });
            } else {
                quantity(this.modify).then((ref) => {
                    console.log(ref);
                    this.dialogFormVisible = false;
                    this.Batchnumber();
                });
            }
        },
        // 修改日期弹窗
        modificationdate(val) {
            (this.state = 0), (this.title = '修改日期');
            console.log(val.infoId);
            this.modify.infoId = val.infoId;
            this.dialogFormVisible = true;
        },
        // 删除
        del(val) {
            Deletedata(val).then((ref) => {
                console.log(ref);
                this.Batchnumber();
            });
        },
        parameter() {
            if (this.$route.query.val) {
                this.form = this.$route.query.val;
                this.getdate.oId = this.$route.query.val.id;
                this.Productaddition.oId = this.$route.query.val.id;
                this.state = false;
                this.Batchnumber();
            }
            //    console.log(this.$route.query.val);
        }
    },
    // 页面监听
    watch: {
        $route() {
            this.parameter();
        }
    },
    mounted() {
        // 送货仓库
        this.Deliverywarehouse();
        this.parameter();
    }
};
</script>
<style lang="less" scoped>
.size {
    font-weight: 700;
    height: 30px;
}
.app {
    box-sizing: border-box;
    padding-left: 10px;
}
.sizebox {
    height: 100px;
}
/deep/.el-form--inline .el-form-item__label {
    font-weight: 700;
}
/deep/.el-dialog {
    width: 70%;
}
.block {
    height: 20px;
    margin-top: 10px;
}
.custome {
    width: 100%;
    height: 40px;
    // text-align: right;
    display: flex;
    justify-content: flex-end;
    // line-height: 80px;
    margin-top: 40px;
}
</style>